<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="A js demo for resize function. Mobile browser header trigger window resize when scroll down">
	<meta name="keywords" content="web, js demo, jQuery plugin, jQuery widget, html, mobile">
	<meta name="author" content="Steper Kuo">
	<title>Demo: Mobile browser header trigger window resize when scroll down</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<style data-toggle="previewCode" data-target="#demoWrap" type="text/css">
		/* Demo's CSS here */
	</style>
	<style type="text/css">
		.title-info
		{
			font-weight: bold;
			color: red;
		}
		#currentOrientation
		{
			color: white;
			font-size: 16px;
			position: fixed;
			bottom: 10px;
			right: 10px;
			width: 120px;
			height: 25px;
			background-color: #1a1a1a;
		}
		#currentSize
		{
			color: white;
			font-size: 16px;
			position: fixed;
			bottom: 10px;
			left: 10px;
			width: 150px;
			height: 25px;
			background-color: #1a1a1a;
		}
		.text-section
		{
			margin: 0 20px;
			padding: 200px 0;
		}
		#eventLog
		{
			height: 100px;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div data-toggle="previewCode" data-target="#demoWrap">
					<!--Demo's html here-->
<div class="title-info">Bg color changed when $('window').resize() triggered.</div>
<div id="currentOrientation"></div>
<div id="currentSize"></div>
<textarea id="eventLog"></textarea>
				</div>
				<h3 id="overview">Overview</h3>
				<!--Introduction here-->
				<p>

				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
$(document).ready(function ()
{
	windowResizeListener();
	orientationChangeListener();
});
function windowResizeListener()
{
	var windowWidth = $(window).width(),
			windowHeight = $(window).height(),
			$currentSize = $("#currentSize");
	$currentSize.text("Height: " + windowHeight);
	$(window).resize(function ()
	{
		var newWidth = $(window).width(),
				newHeight = $(window).height(),
				random = Math.floor(Math.random() * (255 + 1)),
				log = '',
				heightText = $currentSize.text();

		if (newWidth != windowWidth || newHeight != windowHeight)
		{
			log = "Really resize! ";
			if (newHeight != windowHeight)
			{
				heightText = random.toString() + " Height: " + newHeight;
			}
			windowWidth = newWidth;
			windowHeight = newHeight;
		}
		else
		{
			log = "False  resize!";
			heightText = random.toString() + " False  resize! ";
		}
		log += "Width:" + newWidth.toString() + " Height:" + newHeight.toString();
		console.log(log);
		$currentSize.text(heightText);

		updateTextarea($('#eventLog'), log);

		changeBackgroundColor($("#demos"));
	});
}
function changeBackgroundColor($dom)
{
	var red = Math.floor(Math.random() * (255 + 1));
	var green = Math.floor(Math.random() * (255 + 1));
	var blue = Math.floor(Math.random() * (255 + 1));
	document.body.style.background = "rgb(" + red + "," + green + "," + blue + ")";
	$dom.css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
}
function orientationChangeListener()
{
	// Bind an event to window.orientationchange that, when the device is turned, gets the orientation and displays it to on screen.
	$(window).on("orientationchange", function ()
	{
		$("#currentOrientation").text("Orientation: " + window.orientation);
	});

	// You can also manually force this event to fire.
	$(window).trigger('orientationchange');
}
function updateTextarea($textarea, newLog)
{
	$textarea.text($textarea.text() + '\n' + newLog);
	$textarea.scrollTop($textarea[0].scrollHeight);
}
</script>

</body>
</html>